<template>
  <div class="cont">
    <div class="header">
      {{ data.title }}
    </div>
    <div v-if="arr.length!=0">
      <div class="list" v-for="(item, index) in arr" :key="index">
      <div class="top">
        <div class="left">
          <div class="title">{{ item.title }}</div>
          <div class="tip">{{ item.tip }}</div>
          <div class="msg">
            <div v-for="item2 in item.children" :key="item2.label">
              <span>{{ item2.label }}</span
              >{{ item2.value }}
            </div>
          </div>
        </div>
        <div class="right">
          <img :src="item.img" alt="" />
        </div>
      </div>
      <div class="bottom">
        <i class="iconfont icon-shuangjiantouyou"></i>
        <a :href="item.link" target="_blank">数据表单</a>
      </div>
    </div>
    </div>
    <div v-else>
      暂无数据
    </div>
  </div>
</template>
<style lang="scss" scoped>
.cont {
  .header {
    font-size: 24px;
    padding-top: 10px;
    margin-top: 0px;
    margin-bottom: 2px;
    padding-bottom: 1px;
    color: #40b6e8;
    font-weight: normal;
    text-align: center;
  }
  .list {
    margin-top: 30px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      border: none;
      box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1),
        0 0 4px 0 rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1),
        0 0 4px 0 rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      .left {
        .title {
          color: #707070;
          font-size: 18px;
        }
        .tip {
          font-size: 18px;
          color: #40b6e8;
          font-weight: bold;
        }
        .msg {
          margin-top: 40px;
          line-height: 26px;
          span {
            display: inline-block;
            width: 80px;
          }
        }
      }
      .right {
        padding: 30px 60px 30px 100px;
        img {
          width: 140%;
        }
      }
    }
    .bottom {
      padding: 16px 30px;
      border: none;
      box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1),
        0 0 4px 0 rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.1),
        0 0 4px 0 rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      a {
        text-decoration: none;
        margin-left: 6px;
      }
    }
  }
}
</style>
<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          id: 0,
          title: "齿轮输送泵",
        };
      },
    },
  },
  data() {
    return {
      arr: [],
    };
  },
  watch: {
    "data.id": {
      immediate: true,
      handler(n) {
        if(n==0){
          this.arr = [
              {
                title: "齿轮输送泵",
                tip: "KF 2.5 ... 630",
                children: [
                  { label: "排量", value: "Vg = 2,5... 630 cm³/r" },
                  { label: "运行压力", value: "p = ... 25 bar" },
                  { label: "转速", value: "n = ... 3600 1/min" },
                ],
                img: require("../assets/img/part1.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/KF2_5...630_CN_02-17_view_rev_2.pdf",
              },
              {
                title: "齿轮输送泵",
                tip: "KF 2.5 ... 200 带磁耦合",
                children: [
                  { label: "排量", value: "Vg = 2,5... 200 cm³/r" },
                  { label: "运行压力", value: "p = ... 25 bar" },
                  { label: "转速", value: "n = ... 3600 1/min" },
                ],
                img: require("../assets/img/part2.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/KF4...80_m.Magnk_GB_03-09_01.pdf",
              },
              {
                title: "齿轮输送泵",
                tip: "KF 3/100...KF 6/730",
                children: [
                  { label: "排量", value: "Vg = 100...630 cm³/r" },
                  { label: "运行压力", value: "p = ... 25 bar" },
                  { label: "转速", value: "n = ... 2000 1/min" },
                ],
                img: require("../assets/img/part3.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/KF3-100_CN_11-09_view.pdf",
              },
              {
                title: "齿轮输送泵",
                tip: "KF 3/100...KF 6/630 带磁耦合",
                children: [
                  { label: "排量", value: "Vg = 100...630 cm³/r" },
                  { label: "运行压力", value: "p = ... 25 bar" },
                  { label: "转速", value: "n = ... 2000 1/min" },
                ],
                img: require("../assets/img/part4.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/KF3-KF6_m.Magnk_GB_02-08_02.pdf",
              },
              {
                title: "高压输送泵",
                tip: "KP .../434",
                children: [
                  { label: "排量", value: "	Vg = 28...250 cm³/r" },
                  { label: "运行压力", value: "p = ... 150 bar" },
                  { label: "转速", value: "n = ... 1500 1/min" },
                ],
                img: require("../assets/img/part5.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/KP_434_CN_02-14_view.pdf",
              },
              {
                title: "齿轮输送泵",
                tip: "KF 32... 80 带 T 阀",
                children: [
                  { label: "排量", value: "Vg = 32... 80 cm³/r" },
                  { label: "运行压力", value: "p = ... 25 bar" },
                  { label: "转速", value: "n = ... 3000 1/min" },
                ],
                img: require("../assets/img/part6.png"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/KF32...80_T-valve_GB_07-09_01.pdf",
              },
              {
                title: "齿轮输送泵",
                tip: "KF 32... 112 带通用阀",
                children: [
                  { label: "排量", value: "Vg = 32... 112 cm³/r" },
                  { label: "运行压力", value: "p = ... 25 bar" },
                  { label: "转速", value: "n = ... 3000 1/min" },
                ],
                img: require("../assets/img/part7.jpg"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/U-valve_CN_10-11_view.pdf",
              },
              {
                title: "齿轮输送泵",
                tip: "KF 0",
                children: [
                  { label: "排量", value: "	Vg = 0,5...4 cm³/r" },
                  { label: "运行压力", value: "p = ... 120 bar" },
                  { label: "转速", value: "n = ... 3000 1/min" },
                ],
                img: require("../assets/img/part8.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/KF3-100_CN_11-09_view.pdf",
              },
              {
                title: "齿轮输送泵",
                tip: "KF 1/4...KF 1/24 经涂层",
                children: [
                  { label: "排量", value: "	Vg = 4...24 cm³/r" },
                  { label: "运行压力", value: "p = ... 50 bar" },
                  { label: "转速", value: "n = ... 1500 1/min" },
                ],
                img: require("../assets/img/part9.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/KF1_4-24_coated_GB_11-06_02.pdf",
              },
              {
                title: "齿轮输送泵",
                tip: "KF 3/100...KF 6/730 低噪音版本",
                children: [
                  { label: "排量", value: "Vg = 63...630 cm³/r" },
                  { label: "运行压力", value: "p = ... 25 bar" },
                  { label: "转速", value: "n = ... 2000 1/min" },
                ],
                img: require("../assets/img/part10.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/KF3-100_CN_11-09_view_01.pdf",
              },
            ];
        }else if(n==1){
           this.arr = [
              {
                title: "齿轮输送泵",
                tip: "BT",
                children: [
                  { label: "排量", value: "Vg = 4... 494 cm³/r" },
                  { label: "运行压力", value: "p = ... 8 bar" },
                  { label: "转速", value: "n = ... 750 1/min" },
                ],
                img: require("../assets/img/bt1.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/BT-BTH_CN_08-11_view.pdf",
              },
              {
                title: "齿轮输送泵",
                tip: "BTH",
                children: [
                  { label: "排量", value: "Vg = 97... 1056 cm³/r" },
                  { label: "运行压力", value: "p = ... 8 bar" },
                  { label: "转速", value: "n = ... 750 1/min" },
                ],
                img: require("../assets/img/bt2.gif"),
                link: "http://www.kracht.cn/uploads/tx_ttproducts/datasheet/BT-BTH_CN_08-11_view_01.pdf",
              },
            ];
        }else{
          this.arr=[]
        }
      },
    },
  },
  created() {},
};
</script>
 
<style lang = "scss" scoped>
</style>